<template>
     <ul>
         <li v-for="(item,index) in list" :key="index" @click="operate(item.msg)">
             <img :src="item.img" alt="" :title="item.msg">
         </li>
         <li @mousemove="app=true" @mouseout="app=false">
             <img src="/public/img/side_ewm.png" alt="" title="扫描二维码">
             <Bubbling v-show="app" :direction="'left'">
                 <img src="/public/img/ewm.png" alt="" style="width: 80px">
             </Bubbling>
         </li>
     </ul>
</template>
<!--侧边栏-->
<script setup>
import {ref} from "vue";
import Bubbling from "@/components/publicComponent/Bubbling.vue";
const app = ref(false)

//操作列表
const list = ref([
    {img:"/img/top.png",msg:"返回顶部"},
    {img:"/img/app.png",msg:"下载App"}
])

//操作选项
const operate = (operate)=>{
    switch (operate){
        case "返回顶部" : window.scrollTo(0,0); break;
        case "下载App" :  window.open("http://47.98.224.49:8941/download?file=分享之家App"); break;
    }
}

//分享

</script>

<style scoped>
ul{
    position: fixed;
    top: 50%;
    right: 8%;
    list-style: none;
}
li{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #f1f3f5;
    box-shadow:  0 1px 3px rgba(96, 97, 98, 0.1);
    border: 1px solid rgba(96, 97, 98, 0.1);
    border-top: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
li img{
    width: 30px;
}
</style>